<template>
  <img :id="`barcode${index}${index2}`" :style="{ width: '100%', height: '100%' }">
</template>
<script lang="ts" setup>
import { ref, onMounted,nextTick, toRefs } from 'vue'
import JsBarcode from 'jsbarcode'
const props = defineProps({
    //子组件接收父组件传递过来的值
    index: Number,
    index2: Number
})
//使用父组件传递过来的值
const { index2, index } = toRefs(props)
//(#对应容器中的id,是条形码的携带的信息,是条形码的配置信息)
const options2 = ref({
    displayValue: false,
    fontSize: 10,
    height: 100,
    width: 5,
    textMargin: 1,
    margin: 0
});
onMounted( () => {
    nextTick(()=>{
        JsBarcode(`#barcode${index.value}${index2.value}`, String(`Hello world!`), options2.value)
    })  
})
</script>
<style lang="scss" scoped></style>